<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  components: {},
  name: "commonbushuiliang",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbConnectorzz": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale * this.scalecom;

    var color = "#F5F5F5";
    let addWaterData1 = [];
    let addWaterData2 = [];
    var yData = [];
    var option = {
      // backgroundColor: '#0e2147',
      // title: {
      //   text: "补水量(t/h)",
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: 36 * scale,
      //     fontWeight: "bold"
      //   }
      // },
      grid: {
        bottom: "5%",
        top: "10%",
        left: "5%",
        right: "10%",
        containLabel: true
      },
      xAxis: [
        {
          show: false
        }
      ],
      yAxis: {
        // name:"单位:t/h",
        axisTick: "none",
        axisLine: "none",
        // offset: 40 * scale,
        axisLabel: {
          padding: [0, 10, 0, 10],
          interval: 0,
          textStyle: {
            color: "#ffffff",
            fontSize: 30 * scale
          }
        },
        data: yData
      },
      series: [
        {
          name: "条",
          type: "bar",
          data: addWaterData1,
          label: {
            normal: {
              show: true,
              position: "right",
              distance: 30,
              textStyle: {
                color: "#ffffff",
                fontSize: 30 * scale
              }
            }
          },
          barWidth: 10,
          itemStyle: {
            normal: {
              color: function(params) {
                if (params.data.color == "yellow") {
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#D0A00E"
                    },
                    {
                      offset: 1,
                      color: "#EFE2BB"
                    }
                  ]);
                } else {
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#1170E4"
                    },
                    {
                      offset: 1,
                      color: "#53F3F3"
                    }
                  ]);
                }
              }
            }
          },
          z: 2
        },
        {
          name: "外圆",
          type: "scatter",
          hoverAnimation: false,
          data: addWaterData2,
          symbolSize: 20 * scale,
          itemStyle: {
            normal: {
              color: function(params) {
                if (params.data.color == "yellow") {
                  return "#D0A00E";
                } else {
                  return "#1170E4";
                }
              },
              opacity: 1
            }
          },
          z: 2
        }
      ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },

  methods: {
    loadData(queryDbConnector) {
      this.options.series[0].data = queryDbConnector.addWaterData1;
      this.options.series[1].data = queryDbConnector.addWaterData2;
      this.options.yAxis.data = queryDbConnector.yData;
      this.myChart.setOption(this.options);
    },
  }
};
</script>
<style lang='scss' scoped>
</style>